<template>
  <div>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleFormRef"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="姓名" class="name" prop="username">
        <el-input
          type="text"
          class="name1"
          v-model="ruleForm.username"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别" class="sex" prop="gender">
        <div>
          <el-radio-group v-model="ruleForm.gender" style="margin-left: 70px">
            <el-radio
              label="男"
              value="男"
              class="sex2"
              >男</el-radio
            >
            <el-radio
              label="女"
              value="女"
              class="sex3"
              >女</el-radio
            >
          </el-radio-group>
        </div>
      </el-form-item>
      <el-form-item label="密码" class="pass" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
          class="wid"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" class="pass" prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm.checkPass"
          autocomplete="off"
          class="wid"
        ></el-input>
      </el-form-item>
      <el-form-item label="电话" class="pass" prop="phone">
        <el-input
          type="text"
          v-model="ruleForm.phone"
          autocomplete="off"
          class="wid"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱" class="pass" prop="email">
        <el-input
          type="text"
          v-model="ruleForm.email"
          autocomplete="off"
          class="wid"
        ></el-input>
      </el-form-item>
      <el-form-item label="验证码" class="yzm">
        <div style="display: flex; float: left; width: 48%">
          <el-input v-model="codes" autocomplete="off"></el-input>
        </div>
        <div style="display: flex; float: right; width: 49%">
          <verificationCode @drawCode="getCode" ref="child" class="yzm2" />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm" class="sub">提交</el-button>
        <el-button type="warning" @click="resetForm" class="quit">退出</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import axios from 'axios'
import { ref, reactive } from 'vue'
import router from '@/router'
import verificationCode from '../LoginCom/verificationCode'
import { SM3 } from '@/utils/sm3.js'
import '@/assets/scss/userCom/Regis.scss'
const ruleFormRef = ref(null)
const ruleForm = reactive({
  validCode: '',
  identifyCode: '',
  uid: '',
  username: '',
  gender: '',
  password: '',
  addTime: '',
  phone: '',
  email: '',
  headsrc: ''
})
const codes = ref('')
const child = ref(null)
const identifyCode = ref('')
const getCode = (val) => {
  identifyCode.value = val
}

const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== ruleForm.password) {
    callback(new Error('两次输入密码不一致!'))
  } else {
    callback()
  }
}
const validatePass3 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('手机号不可为空'))
  } else {
    if (value !== '') {
      var reg = /^1[3456789]\d{9}$/
      if (!reg.test(value)) {
        callback(new Error('请输入有效的手机号码'))
      }
    }
    callback()
  }
}
const validatePass4 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请正确填写邮箱'))
  } else {
    if (value !== '') {
      const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (!reg.test(value)) {
        callback(new Error('请输入有效的邮箱'))
      }
    }
    callback()
  }
}

const rules = {
  username: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 1, max: 12, message: '长度在 1 到 12 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 1, max: 12, message: '长度在 1 到 11 个字符', trigger: 'blur' }
  ],
  checkPass: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { min: 1, max: 12, message: '长度在 1 到 11 个字符', trigger: 'blur' },
    { validator: validatePass2, trigger: 'blur', required: true }
  ],
  phone: [
    { required: true, message: '请输入电话', trigger: 'blur' },
    { min: 5, max: 11, message: '长度在 5 到 11 个数字', trigger: 'blur' },
    { validator: validatePass3, trigger: 'blur', required: true }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { min: 3, max: 23, message: '长度在 3 到 23 个字符', trigger: 'blur' },
    { validator: validatePass4, trigger: 'blur', required: true }
  ]
}

const resetForm = () => {
  router.push('/')
}
const submitForm = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      if (codes.value === identifyCode.value) {
        ruleForm.headsrc = '头像1.jpg'
        ruleForm.password = SM3(ruleForm.password)
        axios.post('/api/user/regist', ruleForm).then((res) => {
          if (res.data !== -1) {
            alert('注册成功！账号为：' + res.data)
            router.push('/Login')
          }
        })
      } else {
        ElMessage({
          showClose: true,
          message: '验证码错误！',
          type: 'error'
        })
        child.value.refreshCode()
      }
    }
  })
}
</script>
